<template>
  <div class="sing-list-container">
    <!-- 评论输入框 -->
    <div class="comment-input">
      <van-cell-group inset>
        <van-field
          v-model="commentInfo"
          rows="2"
          autosize
          type="textarea"
          maxlength="140"
          show-word-limit
        />
      </van-cell-group>
    </div>
    <!-- 附加功能 -->
    <div class="comment-plus">
      <div class="comment-icon">
        <!-- 表情框 -->
        <emoji-vue ref="emoji"></emoji-vue>
        <!-- 表情 艾特 话题 -->
        <span class="iconfont icon-biaoqing" @click="setEmojiBox"></span>
        <span class="iconfont icon-aite"></span>
        <span class="iconfont icon-huati"></span>
      </div>
      <!-- 按钮 -->
      <div class="comment-but" @click="useAddComment">
        <button>
          评论
        </button>
      </div>
    </div>

    <template v-if="loadingIsShow">
      <van-loading type="spinner" class="loading" />
    </template>
    <template v-else>
      <!-- 评论列表 -->
      <div class="comment-list-box">
        <div
          v-if="
            commentList.hotComments.length == 0 &&
            commentList.comments.length == 0
          "
          class="noComment"
        >
          还没有评论 快来抢沙发~
        </div>
        <h5 v-if="commentList.hotComments.length > 0">精彩评论</h5>
        <div
          class="comment-list-info"
          v-for="(item, index) in commentList.hotComments"
          :key="index"
        >
          <!-- 左侧头像 -->
          <div class="comment-user-pic">
            <img :src="item.user.avatarUrl" />
          </div>
          <!-- 右侧评论内容 -->
          <div class="comment-list-container">
            <!-- 昵称：内容 -->
            <div class="comment-user-name">
              <span>{{ item.user.nickname }}：</span>
              <span>{{ item.content }}</span>
            </div>
            <!-- 回复别人评论 -->
            <div class="comment-reply" v-if="item.beReplied.length > 0">
              <span>@{{ item.beReplied[0].user.nickname }}：</span>
              <span>{{ item.beReplied[0].content }}</span>
            </div>
            <!-- 时间 操作 -->
            <div class="comment-list-time_handle">
              <div class="comment-list-time">
                {{ formatDate(new Date(item.time), "20YY年MM月dd日 hh:mm") }}
              </div>
              <div class="comment-list-handle">
                <div>举报</div>
                <div>
                  <i class="iconfont icon-dianzan" v-if="true"></i>
                  <i class="iconfont icon-dianzan_kuai" v-else></i>
                  <span>{{ item.likedCount }}</span>
                </div>
                <div>
                  <i class="iconfont icon-zhuanfa"></i>
                </div>
                <div>
                  <i class="iconfont icon-huifu"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 查看更多按钮 -->

      <!-- 最新评论 -->
      <div class="comment-list-box">
        <h5 v-if="commentList.comments.length > 0">
          最新评论({{ commentList.total }})
        </h5>
        <div
          class="comment-list-info"
          v-for="(item, index1) in commentList.comments"
          :key="index1"
        >
          <!-- 左侧头像 -->
          <div class="comment-user-pic">
            <img :src="item.user.avatarUrl" />
          </div>
          <!-- 右侧评论内容 -->
          <div class="comment-list-container">
            <!-- 昵称：内容 -->
            <div class="comment-user-name">
              <span>{{ item.user.nickname }}：</span>
              <span>{{ item.content }}</span>
            </div>
            <!-- 回复别人评论 -->
            <div class="comment-reply" v-if="item.beReplied.length > 0">
              <span>@{{ item.beReplied[0].user.nickname }}：</span>
              <span>{{ item.beReplied[0].content }}</span>
            </div>
            <!-- 时间 操作 -->
            <div class="comment-list-time_handle">
              <div class="comment-list-time">
                {{ formatDate(new Date(item.time), "20YY年MM月dd日 hh:mm") }}
              </div>
              <div class="comment-list-handle">
                <div>举报</div>
                <div>
                  <i class="iconfont icon-dianzan" v-if="true"></i>
                  <i class="iconfont icon-dianzan_kuai" v-else></i>
                  <span>{{ item.likedCount }}</span>
                </div>
                <div>
                  <i class="iconfont icon-zhuanfa"></i>
                </div>
                <div>
                  <i class="iconfont icon-huifu"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useStore } from "vuex";
import {useRouter} from "vue-router"
import axios from "axios";
import { addComment } from "../../hook/addOrDeleteComment";
import { formatDate } from "../../hook/formatTime";
import emojiVue from "../emoji/emoji.vue";
import { Toast } from "vant";

const store = useStore();
const router = useRouter()

// 时间戳
const nowTime = new Date().getTime()

// 歌单id
const songListId = store.state.m_song.songListId;
const cookie = store.state.m_user.cookie;

// loading
const loadingIsShow = ref(true);

// 表情框的展示与否
const emoji = ref();
const setEmojiBox = () => {
  emoji.value.emojiIsShow = true;
};

// 输入框文字
const commentInfo = ref("");

// 评论
const useAddComment = ()=>{
  // 发送评论请求
  addComment(1, 2, songListId, commentInfo.value, cookie)
  Toast("评论成功 ~ 请求返回需要好长时间 因为要缓存防止网易服务器检测")
}

// 监听子组件暴露的值是否改变
onMounted(() => {
  watch(
    () => emoji.value.clickCount,
    (newV) => {
      if (newV) {
        commentInfo.value += emoji.value.emojiContent;
      }
    },
    { deep: true, immediate: true }
  );
});

// 歌单/歌曲评论
const commentList = ref("");

// 获取列表评论
const getCommentContent = async () => {
  await axios
    .post(`/comment/playlist?id=${songListId}&timestamp=${nowTime}`)
    .then((res) => {
      console.log(res.data);
      commentList.value = res.data;
      loadingIsShow.value = false;
    })
    .catch((err) => {
      console.error(err);
    });
};
getCommentContent();
</script>
<style lang='less'>
@import url(../../assets/fonts/comment/iconfont.css);
@import url(../../assets/fonts/comment/comment-list/iconfont.css);

.sing-list-container {
  .comment-input {
    margin-top: 18px;

    .van-cell-group {
      height: 70px;
      border: 1px solid #e5e5e5;
      margin: 0 0;

      .van-field__body {
        height: 38px;
      }
      .van-field__word-limit {
        color: #00000057;
      }
    }
  }
  .comment-plus {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .comment-icon {
      position: relative;

      span {
        margin-right: 10px;
        font-size: 20px;
        &:hover {
          cursor: pointer;
          color: black;
        }
      }
    }
    .comment-but {
      width: 60px;
      height: 30px;
      border-radius: 14px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #d8d8d8;

      &:hover{
        cursor: pointer;
      }

      button {
        background: none;
        border: none;
      }
    }
  }

  .comment-list-box {
    margin-top: 40px;
    .noComment {
      text-align: center;
      color: rgba(0, 0, 0, 0.445);
    }

    h5 {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.767);
    }
    .comment-list-info {
      display: flex;
      padding: 20px 0;
      border-bottom: 1px solid #00000012;

      .comment-user-pic {
        width: 40px;
        height: 40px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          &:hover {
            cursor: pointer;
          }
        }
      }

      &:hover {
        .comment-list-container {
          .comment-list-time_handle {
            .comment-list-handle {
              div:nth-child(1) {
                display: block;
              }
              div:nth-child(2) {
                &::before {
                  display: block;
                }
              }
            }
          }
        }
      }
    }

    .comment-list-container {
      width: 100%;
      padding-left: 14px;
      font-size: 12px;
      display: flex;
      flex-direction: column;

      .comment-user-name,
      .comment-reply {
        span:first-child {
          color: #0b58b0;
          &:hover {
            cursor: pointer;
          }
        }
        span:last-child {
          color: #111213ea;
        }
      }

      .comment-reply {
        margin: 6px 0;
        line-height: 20px;
        padding: 6px 10px;
        border-radius: 10px;
        background-color: #f4f4f4;

        span:last-child {
          color: rgba(0, 0, 0, 0.651);
        }
      }

      .comment-list-time_handle {
        display: flex;
        justify-content: space-between;
        align-items: baseline;

        .comment-list-time {
          color: rgba(2, 2, 2, 0.452);
          &:hover {
            cursor: default;
          }
        }

        .comment-list-handle {
          color: #00000094;
          display: flex;
          align-items: baseline;

          div:nth-child(1) {
            display: none;
            &::before {
              display: none;
            }
          }

          div:nth-child(2) {
            &::before {
              display: none;
            }
          }

          div {
            position: relative;
            padding: 0 10px;

            &:hover {
              color: rgb(0, 0, 0);
              cursor: pointer;
            }

            &::before {
              content: "";
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              display: block;
              width: 1px;
              height: 12px;
              background-color: #e7cfe7;
            }
          }
        }
      }
    }
  }
}
</style>